<template>
        <div>
           
           <div class="titlediv">
               <p>我欲乘风破浪踏遍黄沙海洋</p>
                <div>
                    <span>发表时间: 2015-5-25</span>
                    <span>点击:0次</span>
                </div>
           </div>

           <hr>


           <div class="thumbs">
               <img class="preview-img" v-for="(item, index) in list" :src="item.src" 
               height="100" @click="$preview.open(index, list)"  :key="item.imgid">

              
               
           </div>

             <!-- 图片内容区域 -->
        <div class="content123" v-html="content123"></div>

            
        <comment-box :msgid='id'></comment-box>
        </div>
</template>



<script>

import { Toast } from "mint-ui";
import comment from '../subcomponents/comment.vue'
export default {
         data:function() {
            return{
                content123:'与你最好的相逢，在10月，炎热的夏暑只剩下老鼠的尾巴，长长细细的，那时的秋风稍稍微凉，咸湿的海风，起伏着你长长的黑裙子。有件事一直想告诉你，你不笑的样子不好看，甚至有点丑的。但是你笑起来那眉尾弯弯的笑意，竟像百花齐放的灿烂。那浅显的酒窝，梨花带水',
                list:[],
                id:this.$route.params.id
           }
        },

        created() {
             this.hasimglist() 
        },

        methods: {
          hasimglist() {
                        for(var i = 0;i<5;i++) {
                         this.list.push({imgid:i,src:"../../images/shuijiao.jpg"})
                        }
                },

              
        },
       components: {
             "comment-box": comment
        }

}
</script>


<style lang="less" scoped>

    .titlediv {
        margin-top: 15px;
        p {
            text-align: center;
            font-size: 15px;
             color: blue;
        }

        div {
            padding: 0 5px;
            display: flex;
            justify-content: space-between;
            span {
               
                font-size: 12px;
            }
        }
    }

    .content123 {
    font-size: 13px;
    line-height: 30px;
  }

.thumbs{
    img{
      margin: 5px;
      box-shadow: 0 0 8px #999;
      width: 30%;
    }
  }
          

</style>